<template>
  <div>
    <!-- 锚点 -->
    <!-- <a href="#/login">login</a><br>
    <a href="#/info">info</a> -->


    <!-- 在vue中不会用a标签来实现切换，用一个vue-router提供的内置组件，他的功能比a标签要强大 -->
    <!-- 声明式导航 -->
    <router-link to='/login'>login</router-link>&nbsp;
    <router-link to='/info'>info</router-link>&nbsp;
    <router-link to='/info'>info/abc</router-link>
<button @click='fn'>login</button>
<router-link to='/user?id=1'>第一个用户</router-link>
<router-link to='/user?id=2'> 第二个用户</router-link>
<button @click='fn1'>第3个用户</button>
<router-link to='/article/1'>第一个文章</router-link>
<router-link to='/article/2' >第二个文章</router-link>
<button @click='fn2'>第三个文章</button>
<button @click='fn3'>返回</button>
<router-link to="/zhejiang/hangzhou">杭州</router-link>&nbsp;
    <router-link to="/zhejiang/wenzhou">温州</router-link>&nbsp;
    <!-- 占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
  fn(){
    // 编程式导航
    this.$router.push('/login')
  },
  fn1(){
    // this.$router.push('/user?id=3')
    // 可以换另一种写法，适用于多的时候
    this.$router.push({path:'/user',query:{id:3}})
  },
  fn2(){
    // this.$router.push('/article/3')
    // /换一种方式写，只能用name不能用path
    this.$router.push({name: 'article',params:{id:3}})
    },
    fn3(){
      // 返回上一级
this.$router.go(-1)
    }

}}
</script>

<style scoped>
.router-link-active{
  color:orange
}
</style>